<template>
    <el-main>
    <!-- 新增按钮 -->
    <el-button type="success" icon="el-icon-plus" @click="openAddWindow" size="mini" style="font-size: 10px">新增</el-button>
      <!-- 数据表格 -->
      <el-table
        class="tableBox"
        style="width: 100%; font-size: 15px"
        :height="tableHeight"
        :data="menuList"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children' }"
        border
        stripe
      >
        <el-table-column prop="label" label="菜单名称" />
        <el-table-column prop="type" label="菜单类型" align="center" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == '0'" size="mini" style="font-size: 6px" >目录</el-tag>
            <el-tag v-else-if="scope.row.type == '1'" type="success" size="mini" style="font-size: 6px">
              菜单</el-tag>
            <el-tag v-else-if="scope.row.type == '2'" type="warning" size="mini" style="font-size: 6px">
              按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="图标" align="center" width="150">
          <template slot-scope="scope">
            <i v-if="scope.row.icon.includes('el-icon')" :class="scope.row.icon" />
            <svg-icon v-else :icon-class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="路由名称" width="180"/>
        <el-table-column prop="path" label="路由地址" />
        <el-table-column prop="url" label="组件路径" />
        <el-table-column align="center" label="操作" width="250">
          <template slot-scope="scope">
            <el-button
              style="font-size: 10px"
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editMenu(scope.row)"
            >编辑
            </el-button>
            <el-button
              style="font-size: 10px"
              type="danger"
              size="mini"  
              icon="el-icon-delete"
              @click="deleteMenu(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    <!-- 新增或编辑弹框 -->
    <system-dialog
      :title="menuDialog.title"
      :width="menuDialog.width"
      :height="menuDialog.height"
      :visible="menuDialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          ref="menuForm"
          :model="menu"
          :rules="rules"
          label-width="120px"
          :inline="true"
          size="mini"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item prop="type" label="菜单类型">
                <el-radio-group v-model="menu.type">
                  <el-radio :label="0">目录</el-radio>
                  <el-radio :label="1">菜单</el-radio>
                  <el-radio :label="2">按钮</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item prop="parentName" size="small" label="所属菜单">
            <el-input
              class="f-item"
              v-model="menu.parentName"
              :readonly="true"
              @click.native="selectParentMenu"
            />
          </el-form-item>
          <el-form-item prop="label" size="small" label="菜单名称">
            <el-input v-model="menu.label" class="f-item"/>
          </el-form-item>
          <el-form-item size="small" label="菜单图标" >
            <!-- <el-input v-model="menu.icon" /> -->
            <my-icon @selecticon="setIcon" ref="child" style="width: 237px"></my-icon>
          </el-form-item>
          <el-form-item
            v-if="menu.type == 1"
            prop="name"
            size="small"
            label="路由名称"
          >
            <el-input v-model="menu.name" class="f-item"/>
          </el-form-item>
          <el-form-item
            v-if="menu.type != 2"
            prop="path"
            size="small"
            label="路由地址"
          >
            <el-input v-model="menu.path" class="f-item"/>
          </el-form-item>
          <el-form-item
            v-if="menu.type == 1"
            prop="url"
            size="small"
            label="组件路径"
          >
            <el-input v-model="menu.url" class="f-item"></el-input>
          </el-form-item>
          <el-form-item prop="code" size="small" label="权限字段">
            <el-input v-model="menu.code" class="f-item"/>
          </el-form-item>
          <el-form-item size="small" label="菜单序号">
            <el-input v-model="menu.orderNum" class="f-item"/>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
    <!--  -->
    <!-- 选择所属菜单弹框 -->
    <system-dialog
      :title="parentDialog.title"
      :width="parentDialog.width"
      :height="parentDialog.height"
      :visible="parentDialog.visible"
      @onClose="onParentClose"
      @onConfirm="onParentConfirm"
    >
      <div slot="content">
        <el-tree
          ref="parentTree"
          style="font-size: 14px"
          :data="parentMenuList"
          node-key="id"
          :props="defaultProps"
          empty-text="暂无数据"
          :show-checkbox="false"
          default-expand-all
          :highlight-current="true"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <div slot-scope="{ node, data }" class="customer-tree-node">
            <!-- 长度为0说明没有下级 -->
            <span v-if="data.children.length == 0">
              <i class="el-icon-document" style="color: #8c8c8c; font-size: 18px" />
            </span>
            <span v-else @click.stop="openBtn(data)">
              <svg-icon v-if="data.open" icon-class="add-s" />
              <svg-icon v-else icon-class="sub-s" />
            </span>
            <span style="margin-left: 3px">{{ node.label }}</span>
          </div>
        </el-tree>
      </div>
    </system-dialog>
  </el-main>
</template>

<script>
// 导入menu.js脚本代码
import menuApi from '@/api/menu'
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue'
//导入自定义的icon图标库
import { elementIcons } from "@/utils/icons";
//导入自定义图标组件
import MyIcon from '@/components/system/MyIcon.vue'


export default {
  name: 'MenuList',
  data() {
    return {
      menuList: [], // 菜单列表
      tableHeight: 0, // 表格高度

      iconList: [],//图标列表
      userChooseIcon: "",//用户选中的图标

      // 新增或编辑弹框属性
      menuDialog: {
        title: '',
        width: 820,
        height: 450,
        visible: false
      },
      // 菜单属性
      menu: {
        id: '',
        type: '',
        parentId: '',
        parentName: '',
        label: '',
        icon: '',
        name: '',
        path: '',
        url: '',
        code: '',
        orderNum: ''
      },
      rules: {
        type: [{ required: true, trigger: 'change', message: '请选择菜单类型' }],
        parentName: [{ required: true, trigger: 'change', message: '请选择所属菜单'
        }],
        label: [{ required: true, trigger: 'blur', message: '请输入菜单名称' }],
        name: [{ required: true, trigger: 'blur', message: '请输入路由名称' }],
        path: [{ required: true, trigger: 'blur', message: '请输入路由路径' }],
        url: [{ required: true, trigger: 'blur', message: '请输入组件路径' }],
        code: [{ required: true, trigger: 'blur', message: '请输入权限字段' }]
      },
      // 上级菜单弹框属性
      parentDialog: {
        title: '选择所属菜单',
        width: 300,
        height: 450,
        visible: false
      },
      // 树属性定义
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      parentMenuList: [] // 所属菜单列表
    }
  },
  //注册组件
  components:{
    SystemDialog,
    MyIcon
  },
  // 初始化时调用
  created() {
    // 调用查询菜单列表的方法
    this.search(),
    //调用获取图标列表
    this.getIconList()


  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 180
    })
  },
  methods: {
    /**
    * 查询菜单列表
    */
    async search() {
      // 发送查询请求
      const res = await menuApi.getMenuList()
      // 判断是否成功
      if (res.success) {
        // 赋值
        this.menuList = res.data
      }
    },
    /**
    * 打开添加窗口
    */
    openAddWindow() {
      this.$resetForm('menuForm', this.menu) // 清空表单数据
      this.menu.url = '/system/build/index'
      this.menuDialog.title = '新增菜单' // 设置窗口标题
      this.menuDialog.visible = true // 显示窗口
      this.userChooseIcon = ''// 清空菜单图标
    },
    /**
    * 编辑菜单
    * @param row
    */
    editMenu(row) {
      // 把当前要编辑的数据复制到数据域，给表单回显
      this.$objCopy(row, this.menu)
      // 设置弹框属性
      this.menuDialog.title = '编辑菜单'
      this.menuDialog.visible = true
      this.$nextTick(() => {
        this.$refs['child'].userChooseIcon = row.icon// 菜单图标回显
      })
    },
    /**
    * 删除菜单
    * @param row
    */
     async deleteMenu(row) {
      // 判断是否存在子菜单
      const result = await menuApi.checkPermission({ id: row.id })
      // 判断是否可以删除
      if (!result.success) {
        // 提示不能删除
        this.$message.warning(result.message)
      } else {
        // 确认是否删除
        const confirm = await this.$myconfirm('确定要删除该数据吗?')
        if (confirm) {
          // 发送删除请求
          const res = await menuApi.deleteById({ id: row.id })
          // 判断是否成功
          if (res.success) {
            // 成功提示
            this.$message.success(res.message)
            // 刷新
            this.search()
          } else {
            // 失败提示
            this.$message.error(res.message)
          }
        }
      }
    },
    /**
    * 添加和修改菜单窗口关闭事件
    */
    onClose() {
      this.menuDialog.visible = false // 关闭窗口
    },

    /**
    * 添加和修改菜单窗口确认事件
    */
    onConfirm() {
      // 表单验证
      this.$refs.menuForm.validate(async (valid) => {
        if (valid) {
          let res = null
          // 判断菜单ID是否为空
          if (this.menu.id === '') {
            // 发送添加请求
            res = await menuApi.addMenu(this.menu)
          } else {
            // 发送修改请求
            res = await menuApi.updateMenu(this.menu)
          }
          // 判断是否成功
          if (res.success) {
            this.$message.success(res.message)
            // 刷新
            // this.search();
            window.location.reload()
            // 关闭窗口
            this.menuDialog.visible = false
          } else {
            this.$message.error(res.message)
          }
        }
      })
    },
    /**
    * 选择所属菜单
    */
    async selectParentMenu() {
          // 显示窗口
      this.parentDialog.visible = true
      // 发送查询请求
      const res = await menuApi.getParentMenuList()
      // 判断是否成功
      if (res.success) {
        // 赋值
        this.parentMenuList = res.data
      }
    },
  /**
  * 选择所属菜单取消事件
  */
  onParentClose() {
    this.parentDialog.visible = false // 关闭窗口
  },
  /**
  * 选择所属菜单确认事件
  */
  onParentConfirm() {
    this.parentDialog.visible = false // 关闭窗口
  },
  /**
  * 切换图标
  * @param data
  */
  openBtn(data) {
    data.open = !data.open
    this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
  },
  /**
  * 所属菜单节点点击事件
  */
  handleNodeClick(data) {
    // 所属父级菜单ID
    this.menu.parentId = data.id
    // 所属父级菜单名称
    this.menu.parentName = data.label
  },


    /**
    * 获取图标列表
    */
    getIconList() {
      this.iconList = elementIcons
    },
    // 给icon绑定的点击事件
    setIcon(icon) {
      this.userChooseIcon = icon // 将i的样式设为选中的样式el-icon-xxx
      this.menu.icon = icon
    }

  }
}
</script>

<style lang="scss">
/* 下拉滚动条 */
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb{
  border-radius: 8px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  background-color: #c8c8c8;
}
/* icon */
.iconList {
  width: 400px;
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
    i {
    display: inline-block;
    width: 60px;
    height: 45px;
    color: #000000;
    font-size: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    line-height: 45px;
    margin: 5px;
      &:hover {
        color: orange;
        border-color:orange;
      }
  }
}
.chooseIcons{
  width: 175px;
  background-color: #FFFFFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 33px;
  line-height: 25px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}


.f-item>>>.el-input__inner {
   width: 151px;
}

// el-table 表格行高设置
.tableBox {
  th {
    padding: 0 !important;
    height: 35px;
    line-height: 35px;
  }
  td {
    padding: 0 !important;
    height: 35px;
    line-height: 35px;
  }
}

</style>